<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
           
            width: 220px;
          /* overflow: hidden;  */
            margin: 0 auto;
        }
    ul{position: relative;
        width:880px;
        list-style: none;
     
    }
    li{
        float: left;
    }
    button{
        width: 50px;
        height: 50px;
        background: red;
    }
    .tt{
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <ul>
        <li><img src="fun5.png" alt=""></li>
        <li><img src="fun2.png" alt=""></li>
        <li><img src="fun4.png" alt=""></li>
        <li><img src="fun3.png" alt=""></li>
    </ul>
    </div>
    <button class="prev">prev</button>
    <button class="next ">next</button>
    <script src="jquery-1.11.3.js"></script>
   <script>
   $(function(){
        var $ul=$("ul");
        var $prev=$(".prev")
         var $next=$(".next")
         var pageWidth=220; 
         var TIME=400;
         var  ITEM_TIME=20;
         $next.click(function(){
             nextPage(true)
        })
        $prev.click(function(){
            nextPage(false)
        
        })
        function nextPage(next){
            // var offset=0;
            // offset=next? -pageWidth:pageWidth
        //     var itemOffset=offset/(TIME/ITEM_TIME);
        //    var currleft= $ul.position().left
        //    var target=currleft+offset;
        //    var timer=setInterval(function(){
        //        currleft+=itemOffset
        //        if(currleft==target){
        //            clearInterval(timer)
        //        }
        //     $ul.css("left",currleft)
        //    },ITEM_TIME)
            
            // if(target==-3000)
            //  $next.addClass("tt")
            // if(target==0)
            // {$prev.addClass("tt")
            // $next.removeClass("tt")
            // }
           
                var currLeft=$ul.position().left
                var offset=next? -pageWidth:pageWidth
                $ul.css('left',currLeft+offset)
        }
   })
   </script>
    
</body>
</html>